<template>
  <el-form ref="form" :model="form" label-width="150px" :rules="rules">

    <el-form-item label="商品名称" prop="name">
      <el-input v-model="form.name" class="input-W" placeholder="商品名称" />
    </el-form-item>
    <el-form-item label="商品编号" prop="goodsNo">
      <el-input v-model="form.goodsNo" class="input-W" placeholder="商品编号" />
    </el-form-item>
    <el-form-item label="商品价(元)" prop="price">
      <el-input v-model="form.price" class="input-W" placeholder="请输入商品价" />
    </el-form-item>
    <el-form-item label="零售价(元)" prop="retailPrice">
      <el-input v-model="form.retailPrice" class="input-W" placeholder="请输入零售价" />
    </el-form-item>
    <el-form-item label="成本价(元)" prop="costPrice">
      <el-input v-model="form.costPrice" class="input-W" placeholder="请输入成本价" />
    </el-form-item>
    <el-form-item label="库存" prop="stock">
      <el-input v-model="form.stock" class="input-W" placeholder="请输入库存" />
    </el-form-item>
    <el-form-item label="是否启用" prop="status">
      <el-select v-model="form.status" placeholder="" clearable class="input-W" @change="$forceUpdate()">
        <el-option v-for="dict in status" :key="dict.value" :label="dict.label" :value="dict.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="排序" sortable prop="orderNum">
      <el-input-number v-model="form.orderNum" controls-position="right" :min="1" />
    </el-form-item>
    <!-- <el-form-item label="缩略图" prop="imgMin">
      <image-upload :valueData="form.imgMin" params="imgMin" @uploaded="uploaded"></image-upload>
    </el-form-item> -->
    <el-form-item label="大图" prop="minList">
      <image-upload :valueData="form.minList" params="minList" @uploaded="uploaded"></image-upload>
    </el-form-item>
    <el-form-item label="商品详情" prop="details">
      <editor :value="form.details" :min-height="400" ref="editor"></editor>
    </el-form-item>
  </el-form>
</template>

<script>

export default {
  props: ['form'],
  data() {
    const validtext = (rule, value, callback) => {
      let textValue = this.$refs.editor.currentValue;
      if (!textValue) {
        callback(new Error('请输入详情内容'))
      } else {
        callback()
      }
    };
    const imgValidtext = (rule, value, callback) => {
      let textValue = this.form.minList;
      if (textValue && textValue[1] != ']') {
        callback()
      } else {
        callback(new Error('请上传大图'))
      }
    }
    return {
      status: [
        { label: "启用", value: 1 },
        { label: "禁用", value: 0 },
      ],

      selectVenueList: [],

      rules: {
        // typeCode: [{ required: true, message: "商品类型必填", trigger: "blur" }],
        // venueId: [{ required: true, message: "场馆名称必填", trigger: "blur" }],
        // name: [{ required: true, message: "商品名称必填", trigger: "blur" }],
        // goodsNo: [{ required: true, message: "商品编号必填", trigger: "blur" }],
        // cashPrice: [{ required: true, message: "现金价必填", trigger: "blur" }], //现金价
        // costPrice: [{ required: true, message: "成本价格必填", trigger: "blur" }], //成本价格
        // goldPrice: [{ required: true, message: "金积分必填", trigger: "blur" }], //金积分
        // silverPrice: [{ required: true, message: "银积分必填", trigger: "blur" }],//银积分
        // isPutaway: [{ required: true, message: "必选", trigger: "blur" }],
        // artVenues: [{ required: true, message: "场馆归属必填", trigger: "blur" }],//场馆归属
        // resellNum: [{ required: true, message: "止售次数必填", trigger: "blur" }], //止售次数
        // imgMin: [{ required: true, message: "必填", trigger: "blur" }],
        // minList: [{ required: true, message: "请选择大图", trigger: ["blur", "change"], validator: imgValidtext }],
        // details: [{ required: true, trigger: ["blur", "change"], validator: validtext }],
      }

    }
  },
  mounted() {
    if (!this.form.id) {
      this.form.typeCode = 4;
      this.form.goldPrice = 0;
      this.form.silverPrice = 0;
      this.form.venueId = 2;
      this.form.isPutaway = '0';
    }
    // this.scrollToTop();
  },

  watch: {
    "form.cashPrice": {
      deep: true,
      handler: function (newV, oldV) {
        if (newV) {
          this.form.goldPrice = parseInt(this.form.cashPrice) / 2 || 0;
          this.form.silverPrice = parseInt(this.form.cashPrice) / 2 || 0;
        }
      },
    },
  },
  methods: {
    uploaded(params, dict) {
      console.log(params, dict)
      // this.$emit('uploaded', params, dict)
      this.form[params] = JSON.stringify(dict);

    },

    scrollToTop() {
      this.$nextTick(() => {
        this.$refs.formBox.scrollTo(0, 0);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog-div {
  height: 60vh;
  overflow: auto;
}
.input-W {
  width: 100%;
}
</style>